<template>
  <div>
    <HomeSwiper id="swiper"></HomeSwiper>
    <HomeCall id="call"></HomeCall>
    <HomeService id="service"></HomeService>
    <HomeTeam id="team"></HomeTeam>
    <HomeSuccess id="success"></HomeSuccess>
    <HomeAbout id="about"></HomeAbout>
    <div class="fixed-area" v-show="istop">
      <div class="fixed-item" v-for="item in list" :key="item.id" @click="usekey(item.id)">
        <h1 style="margin:6px 0;">{{item.name}}</h1>
      </div>
    </div>
    <div class="back" v-show="istop" @click="backtop">
      <i class="el-icon-caret-top" style="margin:10px 0;" title="回到顶部"></i>
    </div>
  </div>
</template>

<script>
import HomeHeader from '@/pages/index/components/HomeHeader'
import HomeSwiper from '@/pages/index/components/HomeSwiper'
import HomeCall from '@/pages/index/components/HomeCall'
import HomeService from '@/pages/index/components/HomeService'
import HomeTeam from '@/pages/index/components/HomeTeam'
import HomeSuccess from '@/pages/index/components/HomeSuccess'
import HomeAbout from '@/pages/index/components/HomeAbout'
import HomeBottom from '@/pages/index/components/HomeBottom'
export default {
  name: 'HelloWorld',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeCall,
    HomeService,
    HomeTeam,
    HomeSuccess,
    HomeAbout,
    HomeBottom
  },
  data () {
    return {
      istop: false,
      list: [{
        id: 'service',
        name: '服务领域'
      }, {
        id: 'team',
        name: '专家库'
      }, {
        id: 'success',
        name: '成功案例'
      }, {
        id: 'about',
        name: '关于我们'
      }, {
        id: 'about2',
        name: '留言咨询'
      }]
    }
  },
  methods: {
    usekey (key) {
      if (key) {
        if (key === 'about2') {
          var element = document.getElementById('about')
          element.scrollIntoView({ behavior: 'smooth' })
        } else {
          var element2 = document.getElementById(key)
          element2.scrollIntoView({ behavior: 'smooth' })
        }
      }
    },
    getHeight () {
      const top = document.documentElement.scrollTop
      if (top > 500) {
        this.istop = true
      } else {
        this.istop = false
      }
    },
    backtop () {
      var element = document.getElementById('swiper')
      element.scrollIntoView({ behavior: 'smooth' })
    },
    browserRedirect () {
      var sUserAgent = navigator.userAgent.toLowerCase()
      if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
        // 跳转移动端页面
        this.$router.push('/PhoneHome')
        // rel = 'external nofollow'
        // rel = 'external nofollow'
      } else {
        // //跳转pc端页面
        // window.location.href = "/"
        // rel = "external nofollow"
        // rel = "external nofollow";
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.getHeight)
  },
  mounted () {
    this.browserRedirect()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fixed-area {
  position: fixed;
  right: 1%;
  top: 40%;
  height: 150px;
  width: 100px;
  border-radius: 5px;
  background: white;
  border: #cccccc 1px solid;
  box-shadow: 0 2px 10px 0 rgba(31, 56, 88, 0.15);
}
.fixed-item {
  height: 30px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.back {
  position: fixed;
  right: 2%;
  top: 80%;
  height: 40px;
  width: 40px;
  border: #cccccc 1px solid;
  box-shadow: 0 2px 10px 0 rgba(31, 56, 88, 0.15);
  text-align: center;
  color: grey;
  font-size: 20px;
  background: white;
}
</style>
